/*
Promise 异步函数
1.什么是异步函数，怎么指向异步函数，一是通过事件触发的方式；二是通过回调函数的方式
2.Promise 是区别与以上两种方式的一个异步函数的操作
*/
{
  //回顾es5中的异步函数是怎么触发调用的   ajax操作
  let ajax=function(callback){
    console.log('执行');
    setTimeout(function(){
      callback&&callback.call();
    },1000);
  };
  ajax(function(){
    console.log('time1');
  })
  //如果有多层回调的方法需要嵌套的话  罪域代码量来说，用回调的方法，代码是非常的冗长的，也影响了后期代码的一个维护
}

{
  //用Promise方法
  let ajax=function(){
    console.log('执行2');
    return new Promise(function(resolve,reject){
        setTimeout(function(){
        resolve();
        },1000)
    })
  }
  //ajax()执行完以后返回的是一个Promise的一个实例，Promise这个实例有一个.then()的方法，
  ajax().then(function(){
    console.log('promise','time2');
  })
}

{
  //用Promise方法  进行多层调用  串行过程中
  let ajax=function(){
    console.log('执行3');
    return new Promise(function(resolve,reject){
        setTimeout(function(){
        resolve();
        },1000)
    })
  }
  //ajax()执行完以后返回的是一个Promise的一个实例，Promise这个实例有一个.then()的方法，
  ajax()
    .then(function() {
      console.log('timer3');
      return new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve()
        }, 2000)
      });
    })
    .then(function() {
      console.log('time333');
    })
}

{
//用Promise方法在串行调用的过程中 如果获取错误
let ajax=function(num){
  console.log('执行4');
  return new Promise(function(resolve,reject){
    if(num>5){
      resolve();
    }else{
     throw new Error('出错了')
    }
  })
}
  ajax(4)
    .then(function() {
      console.log('log', 4);
    }).catch(function(err) {
      console.log('catch', err);
    })
}

{
//Promise 加载图片的时候  让图片加载完以后在显示到html上面去
//函数加载图片
function loadImg(src){
  return new Promise((resolve,reject)=>{
    let img=document.createElement('img');
    img.src=src;
    img.onload=function(){
      resolve(img)
    }
    img.onerror=function(err){
      reject(err);
    }
  })
}
function showImgs(imgs){
  imgs.forEach(function(img){
    document.body.appendChild(img);
  })
}
Promise.all([
  loadImg('https://p.qpic.cn/music_cover/ibSiagqKjw1zfTgxY7F8CfE0TUngLEPpbossLL7byULIt2GjCfSzcKNQ/300?n=1'),
  loadImg('https://p.qpic.cn/music_cover/VhiacR5mggSiaLuvDtyVoqZiaL2b9ic72HUPa4k8ad8ffL7lb04UOV8cicQ/300?n=1'),
  loadImg('https://p.qpic.cn/music_cover/ibdicXa2X08IMqWtib6SCU0hBf1fCiaHqykXxq27R33tcRDibXcZ71rBaicw/300?n=1')
]).then(showImgs)
}

{
  //图片加载先到先得，先加载完先显示到页面上面
  function loadImg(src){
    return new Promise((resolve,reject)=>{
      let img=document.createElement('img');
      img.src=src;
      img.onload=function(){
        resolve(img)
      }
      img.onerror=function(err){
        reject(err);
      }
    })
  }
  function showImgs(img){
      let p=document.createElement('p');
      p.appendChild(img);
      document.body.appendChild(p);
  }
  Promise.race([
    loadImg('https://p.qpic.cn/music_cover/ibSiagqKjw1zfTgxY7F8CfE0TUngLEPpbossLL7byULIt2GjCfSzcKNQ/300?n=1'),
    loadImg('https://p.qpic.cn/music_cover/VhiacR5mggSiaLuvDtyVoqZiaL2b9ic72HUPa4k8ad8ffL7lb04UOV8cicQ/300?n=1'),
    loadImg('https://p.qpic.cn/music_cover/ibdicXa2X08IMqWtib6SCU0hBf1fCiaHqykXxq27R33tcRDibXcZ71rBaicw/300?n=1')
  ]).then(showImgs)
}
